<template>
<view class="content">
  <topHeight></topHeight>
  <view class="backgroundColor"
        :style="'background-color:'+nowColor"
  >
    <view class="iconfont icon-fanhui back" @click="toBack"></view>
    <text>配色中心</text></view>
  <view class="subject">
    <view v-for="item in colorList"
          :style="{backgroundColor:item.Color}"
          @click="switchTheme(item.id+4)"
          :key="item.id"
    >
      {{item.name}}
    </view>
  </view>
</view>
</template>

<script>
import topHeight from "@/components/top-height";
import colorList from "@/layout/colorMatching";
import {mapState} from "vuex"
export default {
name: "ColorMatching",
  components:{
    topHeight
  },
  data(){
  return{
    colorList:colorList[0].manyList,
  }
  },
  mounted() {
  },
  methods:{
    toBack(){
      uni.navigateBack({

      })
    },
    switchTheme(a){
      // window.document.documentElement.setAttribute('theme',a)
      this.$store.state.nowColor=this.$store.state.Color[a-1].color;
    },
  },
  computed:{
  ...mapState({
    nowColor:state=>state.nowColor
  })
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100vh;
  background-color: #F1F1F1;
  .backgroundColor{
    width: 100%;
    height: 130rpx;
    //@include global-header-background-color();
    color: #FFFFFF;
    font-size: 42rpx;
    text-align: center;
    position: relative;
    line-height: 170rpx;
    .back{
      height: 120rpx;
      width: 60rpx;
      position: absolute;
      left: 25rpx;
    }
  }
  .subject{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 30rpx;
    view{
      width: 150rpx;
      height: 125rpx;
      margin: 30rpx 30rpx 0 0;
      justify-content: space-evenly;
      box-shadow: 0 0 5rpx #F1F3F4;
      border-radius: 10rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 125rpx;
    }
  }
}
</style>
